<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入仓库编码" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库名称" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" style="margin-right:15px" prop="warehouseCode">
              <el-select v-model="form.warehouseCode" placeholder="请选择所属仓库" @change="findwarehouseSpaceList" style="width: 100%">
                <el-option v-for="item in warehouseList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库类型" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库类型" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人电话" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入联系人电话" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入手机号" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入传真" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入邮箱" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="坐标" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入x坐标" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入y坐标" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库地址"  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="国家" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" >
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="省" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="市" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="区" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入仓库详细地址" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入备注" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
Vue.use(VXETable)
export default {
  data() {
    return {
      form: {
        code: '',
        name: '',
        serialNumber: '',
        warehouseCode: '',
        spaceCode: ''
      },
        rules: {

          name: [
            {required: true, message: '请输入仓库名称', trigger: 'blur'},

          ],
          serialNumber: [
            {required: true, message: '请输入编号', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 3 个字符', trigger: 'blur'}
          ],
          warehouseCode: [
            {required: true, message: '请选择仓库', trigger: 'blur'},
          ],
          spaceCode: [
            {required: true, message: '请选择库区', trigger: 'blur'},
          ],
        },
      // 所属仓库
      warehouseList: [],
      // 所属库区
      warehouseSpaceList: []
    }
  },
  created() {
    this.findWarehouseList()
  },
  methods: {
    // 重置
    reset(){
      this.$refs['form'].resetFields()
    },

    // 查询仓库
    findWarehouseList() {
      request({ url: `/ntocc-wms-api/warehouse`, method: 'get', params:{'pageSize':10000 }}).then(response => {
        this.warehouseList = response.data.records
      })
    },
    // 查询库区
    findwarehouseSpaceList() {
      if (this.form.warehouseCode === '') {
        return false
      }
      request({ url: `/ntocc-wms-api/warehouseSpace`, method: 'get', params: { 'warehouseCode': this.form.warehouseCode ,'pageSize':10000 }}).then(response => {
        this.warehouseSpaceList = response.data.records
      })
    },
    // 提交
    funcSubmit() {

      const data = this.form
      request({ url: '/ntocc-wms-api/warehouseLocation', method: 'post', data }).then(response => {
        this.$message({ message: response.msg, type: 'success' })
        this.$emit('fatherAddMethod')
      }).then(() => {
        this.$refs['form'].resetFields()
        })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    }
  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
